{% extends 'myblog/base.html' %}
{% block head %}
    <title>{{ post_detail.title }}</title>
{% endblock %}

{% block body %}
    <div class="content-wrap"><!--内容-->
        <div class="content">
            <header class="news_header">
                <h2>欢迎来到{{ post_detail.title }}</h2>
                <ul>
                    <li>{{ post_detail.author.username }} 发布于{{ post_detail.pub_time }}</li>
                    <li>栏目：<a href="" title="" target="_blank">{{ post_detail.classify }}</a></li>
                    <li>来源：<a href="" title="" target="_blank">{{ post_detail.source }}</a></li>
                    <li>共 <strong>{{ post_detail.look }}</strong> 人围观</li>
                </ul>
            </header>
            <article class="news_content">
                {{ post_detail.content|safe }}
            </article>
            <div class="reprint">转载请说明出处：<a href="" title="" target="_blank">{{ post_detail.author.username }}</a> » <a
                    href="" title="" target="_blank">欢迎来到个人技术博客</a></div>
            <div class="zambia">
                <a href="javascript:;" name="zambia" rel="{{ post_detail.id }}">
                    {# 这个内容进行注释掉 <span class="glyphicon glyphicon-thumbs-up"></span> 赞（{{ post_detail.zan }}） ，后面直接在实现ajax请求的时候，在写#}
                    <span class="glyphicon glyphicon-thumbs-up"></span> 赞（{{ post_detail.zan }}）
                </a>
            </div>
            <div class="tags news_tags">标签：
                {% for tag in post_detail.tags.all %}
                    <span data-toggle="tooltip" data-placement="bottom" title="查看关于 {{ tag.name }} 的文章">
                <a href="">{{ tag.name }}</a>
              </span>
                {% endfor %}
                <span data-toggle="tooltip" data-placement="bottom" title="查看关于 {{ post_detail.title }} 的文章">
              <a href="">{{ post_detail.title }}</a>
          </span>
            </div>

            <nav class="page-nav">
          <span class="page-nav-prev">上一篇<br/>
              {% if prev_post %}
                  <a href="/detail/?id={{ prev_post.0.id }}" rel="prev">欢迎来到{{ prev_post.0.title }}</a>
              {% else %}
                  <a href="">没有上一篇了</a>
              {% endif %}
          </span>
                <span class="page-nav-next">下一篇<br/>
                    {% if next_post %}
                        <a href="/detail/?id={{ next_post.0.id }}" rel="next">欢迎来到{{ next_post.0.title }}</a>
                    {% else %}
                        <a href="">没有下一篇了</a>
                    {% endif %}
          </span>
            </nav>
            <div class="content-block related-content visible-lg visible-md">
                <h2 class="title"><strong>相关推荐</strong></h2>
                <ul>
                    {% for random_post in random_post_list %}
                        <li>
                            <a target="_blank" href=""><img src="/static/media/{{ random_post.img }}" alt="">
                                <h3> {{ random_post.title }} </h3>
                            </a>
                        </li>
                    {% empty %}
                        <p>没有推荐</p>
                    {% endfor %}
                </ul>
            </div>
            <div class="content-block comment">
                <h2 class="title"><strong>评论</strong></h2>
                <form action="/comment/" method="post" class="form-inline" id="comment-form">
                    {# 添加一个隐藏id #}
                    <input type="hidden" name="commentID" id="commentID" value="{{ post_detail.id }}">
                    {% csrf_token %}
                    <div class="comment-title">
                        <div class="form-group">
                            <label for="commentName">昵称：</label>
                            <input type="text" name="commentName" class="form-control" id="commentName"
                                   placeholder="技术博客">
                        </div>
                        <div class="form-group">
                            <label for="commentEmail">邮箱：</label>
                            <input type="email" name="commentEmail" class="form-control" id="commentEmail"
                                   placeholder="admin@xxxx.com">
                        </div>
                    </div>
                    <div class="comment-form">
                        <textarea placeholder="你的评论可以一针见血" name="commentContent"></textarea>
                        <div class="comment-form-footer"></div>

                        <div class="comment-form-btn">
                            <div class="comment-form-btn">
                                <button type="submit" class="btn btn-default btn-comment" onclick="return false">提交评论
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
                <div class="comment-content">

                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript">
        //页面加载
        $('body').show();
        $('.version').text(NProgress.version);
        NProgress.start();
        setTimeout(function () {
            NProgress.done();
            $('.fade').removeClass('out');
        }, 1000);
        //返回顶部按钮
        $(function () {
            $(window).scroll(function () {
                if ($(window).scrollTop() > 100) {
                    $(".gotop").fadeIn();
                } else {
                    $(".gotop").hide();
                }
            });
            $(".gotop").click(function () {
                $('html,body').animate({'scrollTop': 0}, 500);
            });
        });
        //提示插件启用
        $(function () {
            $('[data-toggle="popover"]').popover();
        });
        $(function () {
            $('[data-toggle="tooltip"]').tooltip();
        });
        //鼠标滑过显示 滑离隐藏
        $(function () {
            $(".carousel").hover(function () {
                $(this).find(".carousel-control").show();
            }, function () {
                $(this).find(".carousel-control").hide();
            });
        });
        $(function () {
            $(".hot-content ul li").hover(function () {
                $(this).find("h3").show();
            }, function () {
                $(this).find("h3").hide();
            });
        });
        //页面元素智能定位
        $.fn.smartFloat = function () {
            var position = function (element) {
                var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离
                var pos = element.css("position"); //当前元素距离页面document顶部的距离
                $(window).scroll(function () { //侦听滚动时
                    var scrolls = $(this).scrollTop();
                    if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
                        if (window.XMLHttpRequest) { //如果不是ie6
                            element.css({ //设置css
                                position: "fixed", //固定定位,即不再跟随滚动
                                top: 0 //距离页面顶部为0
                            }).addClass("shadow"); //加上阴影样式.shadow
                        } else { //如果是ie6
                            element.css({
                                top: scrolls  //与页面顶部距离
                            });
                        }
                    } else {
                        element.css({ //如果当前元素element未滚动到浏览器上边缘，则使用默认样式
                            position: pos,
                            top: top
                        }).removeClass("shadow");//移除阴影样式.shadow
                    }
                });
            };
            return $(this).each(function () {
                position($(this));
            });
        };
        //启用页面元素智能定位
        $(function () {
            $("#search").smartFloat();
        });
        // ajax更新点赞功能
        $(function () {
            // 点赞功能
            $(".content .zambia a").click(function () {
                console.log("点赞了！");
                var zambia = $(this);
                var id = zambia.attr('rel');  // 对应详情页文章id
                $.ajax({
                    type: 'POST',
                    url: '/zan/',
                    data: "id=" + id,
                    cache: false,  // 不缓存此页面
                    success: function (resp) {
                        console.log("ajax请求");
                        if (resp.code == 200) {
                            htm = `<span class="glyphicon glyphicon-thumbs-up"></span> 赞（${resp.data}）`
                            zambia.html(htm);
                        } else {
                            alert(resp.msg)
                        }
                    }
                });
                return false;


            });

            // 评论满足条件的时候进行post发送请求
            function req_comment(form_data) {
                $.post('/comment/', form_data, function (data) {
                    console.log(data)
                    h_totle = ""
                    data.data.forEach(function (data) {
                        //h = `<li><span class="face"><img src="/static/images/icon/icon.png" alt=""></span> <span
                         //       class="text"><strong>${data.name}(${data.time}) 说：<br/>${data.content}</span></li>`

                        h = '<li><span class="face"><img src="/static/images/icon/icon.png" alt=""></span> <span class="text"><strong>' + data.name + '(' +
                            data.time+') 说：<br/>' + data.content + '</span></li>'
                        h_totle += h
                    })

                    html = '<ul>' + h_totle + '</ul>'
                    $(".comment-content").html(html)

                })
            }

            // 评论提交请求
            $(".btn-comment").click(function () {
                var commentID = $("#commentID").val()
                var commentName = $("#commentName").val()
                var commentEmail = $("#commentEmail").val()
                var commentContent = $("textarea[name='commentContent']").val()
                var csrfmiddlewaretoken = $("input[name='csrfmiddlewaretoken']").val()
                console.log(commentID, commentName, commentEmail, commentContent)
                if (commentID && commentName && commentEmail && commentContent) {
                    //提交评论
                    form_data = {
                        "commentID": commentID,
                        "commentName": commentName,
                        "commentEmail": commentEmail,
                        "content": commentContent,
                        "csrfmiddlewaretoken": csrfmiddlewaretoken,
                    }
                    req_comment(form_data)

                } else {
                    alert("参数错误")
                    return false
                }
            });
            // 设置防止刷新之后该文章下面的评论消失不见了
            //页面加载就请求一次所有的评论
            var commentID = $("#commentID").val()
            var csrfmiddlewaretoken = $("input[name='csrfmiddlewaretoken']").val()
            req_comment({"commentID": commentID,'csrfmiddlewaretoken':csrfmiddlewaretoken})

        });

    </script>
{% endblock %}
